<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>车型展示</title>
		<link rel="stylesheet" type="text/css" href="../css/basic.css">
		<link rel="stylesheet" type="text/css" href="../css/style.css">
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
		<link rel="stylesheet" type="text/css" href="../css/swiper.min.css">
	</head>
	<body>
		<div class="index-content">
			<!-- 头部 -->
			<header>
				<div class="header-content width1300 clearfix">
					<div class="logo fl clearfix">
						<img src="../img/logo.png" class="fl" />
						<p class="fl">中成商务房车</p>
					</div>
					<div class="search fl">
						<input type="text" placeholder="请输入想要搜索的内容" class="fl" />
						<i class="iconfont icon-sousuo1 fr"></i>
					</div>
					<div class="telphone fr">
						<img src="../img/tel.png" />
						<div class="num">热线电话<b>400-079-6969</b></div>
					</div>
				</div>
				<div class="nav clearfix width1300">
					<div class="nav-list fl">首页</div>
					<div class="nav-list fl">选车中心</div>
					<div class="nav-list fl">推荐车系</div>
					<div class="nav-list fl">优惠资讯</div>
					<div class="nav-list fl">视频中心</div>
					<div class="nav-list fl">关于我们</div>
				</div>
			</header>
			<!-- 当季热销车 -->
			<div class="hot-carbuy width1300">
				<div class="title">车型展示</div>
				<div class="car-style clearfix">
					<div class="car-style-left">
						<div class="select-car">
							<div class="h3title car-type-show">
								<img src="../img/big.png" />
								选车中心
							</div>
							<ul class="selcet-car-show clearfix car-type-show">
								<li>奔驰奢石系列<i class="iconfont icon-2guanbi"></i></li>
								<li>奔驰奢石系列<i class="iconfont icon-2guanbi"></i></li>
								<li>奔驰奢石系列<i class="iconfont icon-2guanbi"></i></li>
							</ul>
							<p class="car-type-show clearAll">清除全部</p>
							<!-- 车型分类 -->
							<div class="car-classify">
								<div class="car-classify-list clearfix">
									<div class="car-title">车系<i class="iconfont icon-xiangyou"></i></div>
									<ul>
										<li>奔驰奢石系列</li>
										<li>奔驰奢石系列</li>
										<li>奔驰奢石系列</li>
										<li>奔驰奢石系列</li>
									</ul>
								</div>
								<div class="car-classify-list clearfix">
									<div class="car-title">价格<i class="iconfont icon-xiangyou"></i></div>
									<ul>
										<li>奔驰奢石系列</li>
										<li>奔驰奢石系列</li>
										<li>奔驰奢石系列</li>
										<li>奔驰奢石系列</li>
									</ul>
								</div>
								<div class="car-classify-list clearfix">
									<div class="car-title">排量<i class="iconfont icon-xiangyou"></i></div>
								</div>
								<div class="car-classify-list clearfix">
									<div class="car-title">驱动<i class="iconfont icon-xiangyou"></i></div>
								</div>
							</div>
						</div>
						<div class="discount-msg">
							<div class="h3title">
								<img src="../img/msg.png" />
								优惠资讯
							</div>
							<div class="discount-msg-all">
								<div class="discount-msg-list clearfix">
									<img src="../img/car1.jpg" />
									<div class="discount-msg-right">
										<h4>吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼</h4>
										<p>2020=09-27</p>
									</div>
								</div>
								<div class="discount-msg-list clearfix">
									<img src="../img/car1.jpg" />
									<div class="discount-msg-right">
										<h4>吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼</h4>
										<p>2020=09-27</p>
									</div>
								</div>
								<div class="discount-msg-list clearfix">
									<img src="../img/car1.jpg" />
									<div class="discount-msg-right">
										<h4>吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼</h4>
										<p>2020-09-27</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="hot-content fr clearfix">
						<div class="hot-list fl">
							<div class="img-box">
								<img src="" />
							</div>
							<div class="img-box">
								<img src="" />
							</div>
							<p class="name oneline">奔驰V级—金马版</p>
							<p class="des oneline">手工刺绣图案</p>
							<p class="des oneline">迈巴赫豪华座椅</p>
						</div>
						<div class="hot-list fl">
							<div class="img-box">
								<img src="" />
							</div>
							<div class="img-box">
								<img src="" />
							</div>
							<p class="name">奔驰V级—金马版</p>
							<p class="des">手工刺绣图案</p>
							<p class="des">迈巴赫豪华座椅</p>
						</div>
						<div class="hot-list fl">
							<div class="img-box">
								<img src="" />
							</div>
							<div class="img-box">
								<img src="" />
							</div>
							<p class="name">奔驰V级—金马版</p>
							<p class="des">手工刺绣图案</p>
							<p class="des">迈巴赫豪华座椅</p>
						</div>
						<div class="hot-list fl">
							<div class="img-box">
								<img src="" />
							</div>
							<div class="img-box">
								<img src="" />
							</div>
							<p class="name">奔驰V级—金马版</p>
							<p class="des">手工刺绣图案</p>
							<p class="des">迈巴赫豪华座椅</p>
						</div>
					</div>
				</div>
			</div>
			
			
			<!-- 悬浮按钮 -->
			<div class="goTop">
				<img src="../img/top.png" />
			</div>
			
			
			<!-- 底部 -->
			<footer class="">
				<div class="foot-classify clearfix width1300">
					<div class="foot-nav">
						<h4>车型总鉴</h4>
						<p>奢石版</p>
						<p>v级系列</p>
						<p>斯宾特系列</p>
						<p>大众T6</p>
						<p>GMC</p>
						<p>豪华加长</p>
					</div>
					<div class="foot-nav">
						<h4>品牌天地</h4>
						<p>品牌中心</p>
						<p>关于我们</p>
						<p>赛事风采</p>
					</div>
					<div class="foot-nav">
						<h4>高级私人定制系列</h4>
						<p>限量发售</p>
						<p>车主故事</p>
					</div>
					<div class="foot-nav">
						<h4>售后服务</h4>
						<p>车主服务</p>
						<p>常见问与答</p>
						<p>原厂配件</p>
						<p>选装配件及精品</p>
					</div>
					<div class="foot-nav">
						<h4>新闻资讯</h4>
						<p>企业动态</p>
						<p>行业热点</p>
					</div>
				</div>
				<div class="companyInfo">
					<div class="width1300">
						<div class="company_name"></div>
						<div class="company-info clearfix">
							<div class="fl">杭州中诚汽车销售服务有限公司&nbsp;&nbsp;|&nbsp;&nbsp;<i>华东高端商务房车展销中心</i></div>
							<div class="fr">
								<div class="telphone fr clearfix">
									<img src="../img/tel.png" />
									<div class="num">热线电话<b>400-079-6969</b></div>
								</div>
								<p class="address">地址：浙江省杭州市下城区绍兴路2号</p>
								<p class="police clearfix"><img src="../img/police.png">浙公网安备33010302003582号</p>
							</div>
						</div>
					</div>
				</div>
			</footer>
		</div>
		<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript">
			// var swiper = new Swiper('.swiper-container', {
			// 	autoplay:true,
			// 	navigation: {
			// 		nextEl: '.swiper-button-next',
			// 		prevEl: '.swiper-button-prev',
			// 	},
			// });
			// var swiper2 = new Swiper('.evaluation-container', {
			// 	slidesPerView: 4,
			// 	spaceBetween: 7
			// });
			
			//阻止浏览器的默认行为 
			function stopDefault( e ) { 
			    //阻止默认浏览器动作(W3C) 
			    if ( e && e.preventDefault ) 
			        e.preventDefault(); 
			    //IE中阻止函数器默认动作的方式 
			    else 
			        window.event.returnValue = false; 
			    return false; 
			}
			function stopBubble(e) {
			//如果提供了事件对象，则这是一个非IE浏览器 
			if ( e && e.stopPropagation ) 
			    //因此它支持W3C的stopPropagation()方法 
			    e.stopPropagation(); 
			else 
			    //否则，我们需要使用IE的方式来取消事件冒泡 
			    window.event.cancelBubble = true; 
			}
			$(".car-classify").on("click",".car-classify-list",function(e){
				console.log(131)
				stopDefault()
				$(this).find("ul").toggle()
			})
			// 点击选择的分类列表
			$(".car-classify ul").on("click","li",function(e){
				stopBubble()
					console.log(249)
				$(".car-style .car-style-left .select-car .car-type-show").show()
			})
			// 点击删除
			$(".selcet-car-show li").on("click",".iconfont",function(){
				$(this).parent("li").hide();
			})
			// 清除全部
			$(".clearAll").click(function(){
				$(".car-type-show").hide();
			})
		</script>
	</body>
</html>
